<template>
  <div class="my-classes">
    <!-- 班级统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <el-icon class="stat-icon"><User /></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ sum_stu }}</div>
              <div class="stat-label">学生总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <el-icon class="stat-icon"><Collection /></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ sum_class }}</div>
              <div class="stat-label">班级数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <el-icon class="stat-icon"><Document /></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ sum_lectures }}</div>
              <div class="stat-label">课程数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 班级列表 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <h3>班级列表</h3>
              <el-select v-model="filterSemester" placeholder="选择学期" style="width: 200px">
                <el-option
                    v-for="item in semester"
                    :key="item.v"
                    :label="item.label"
                    :value="item.v"
                />
              </el-select>
            </div>
          </template>

          <el-table :data="l" style="width: 100%">
            <el-table-column prop="classId" label="班级编号" width="100" />
            <el-table-column prop="className" label="班级名称" width="180" />
            <el-table-column prop="courseId" label="课程编号" />
            <el-table-column prop="courseName" label="授课课程" width="200">
              <template #default="scope">
                <el-tag
                  class="course-tag"
                >
                  {{ scope.row.courseName }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="semester" label="授课学期">
              <template #default="scope">
                {{ getSemesterName(scope.row.semester) }}
              </template>

            </el-table-column>
            <el-table-column prop="credit" label="学分"/>
            <el-table-column label="操作" width="250" fixed="right">
              <template #default="scope">
                <el-button link type="primary" @click="handleViewDetails(scope.row)">
                  查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 班级详情对话框 -->
    <el-dialog
      v-model="detailsDialogVisible"
      title="班级详情"
      width="800px"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="班级名称">{{ selectedClass.className }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ selectedClass.createTime }}</el-descriptions-item>
        <el-descriptions-item label="授课课程" :span="2">
          <el-tag
            v-for="course in selectedClass.courses"
            :key="course"
            class="course-tag"
          >
            {{ course }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="班级简介" :span="2">
          {{ selectedClass.description }}
        </el-descriptions-item>
      </el-descriptions>

    </el-dialog>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  User,
  Collection,
  Document,
} from '@element-plus/icons-vue'
import { useTeacherStores } from '@/stores/teacherStores.js'
import {storeToRefs} from "pinia";
import axios from "axios";
import baseURL from "@/config/config.js";
// 统计数据
const teacherStore = useTeacherStores()
const { sum_stu, sum_class, sum_lectures} = storeToRefs(teacherStore)
// 班级数据
const semester = [
  {label: '全部学期', v: 0},
  {label: '一年级第一学期', v: 1},
  {label: '一年级第二学期', v: 2},
  {label: '二年级第一学期', v: 3},
  {label: '二年级第二学期', v: 4},
  {label: '三年级第一学期', v: 5},
  {label: '三年级第二学期', v: 6},
  {label: '四年级第一学期', v: 7},
  {label: '四年级第二学期', v: 8},
]
// 选中的班级
const selectedClass = ref({})
const detailsDialogVisible = ref(false)
const filterSemester = ref(0)
// 处理查看详情
const handleViewDetails = (row) => {
  selectedClass.value = row
  detailsDialogVisible.value = true
}
// 获取学期名字
function getSemesterName(v){
  const it = semester.find(item => item.v === v)
  return it ? it.label : ""
}
const l = ref([
  {
    "classId": 1,
    "className": "23软件工程一班",
    "courseId": 66,
    "courseName": "java EE 编程技术",
    "credit": 3,
    "semester": 4
  }
])
// 钩子函数
onMounted(() => {
  axios({
    url: baseURL + '/teacher/get-detail-lecture',
    method: 'get',
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`
    }
  }).then(res => {
    l.value = res.data.data
  })
})
</script>

<style scoped>
.my-classes {
  padding: 20px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.stat-icon {
  font-size: 48px;
  color: var(--el-color-primary);
}

.stat-info {
  text-align: center;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.2;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  margin-top: 8px;
}

.mt-20 {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 100px;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  color: #1f2937;
}

.course-tag {
  margin-right: 8px;
  margin-bottom: 4px;
}

.management-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 